<template>
  <div class="container">
    <div v-if="!statusSubmit" class="formContent">
      <el-card class="cards" style="margin-bottom: 20px">
        <div style="text-align: center">
          <h2>{{ formDetail.title }}</h2>
          <v-form-render
            :form-json="formJson"
            :form-data="formData"
            :option-data="optionData"
            ref="vFormRef"></v-form-render>
        </div>
      </el-card>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
    <div v-if="statusSubmit" class="formContent">
      <el-card class="cards">
        <div style="text-align: center">
          <h2>{{ formDetail.title }}</h2>
          <h3>测试结果：{{ globalExplain.explain }} 测试分数：{{ globalExplain.score }}</h3>
          <span>这是测试结果描述 {{ globalExplain.description }}</span>
          <div class="tags">
            <el-card v-for="item in tagExplains" class="tag" shadow="never">
              <span>{{ item.description }}</span>
              <div class="explain">{{ item.explain }}</div>
              <div class="score">分数：{{ item.score }}</div>
            </el-card>
          </div>
        </div>
        <el-button style="margin-left: 80%" type="text" @click="handleCheck">针对以上症状的推荐视频</el-button>
      </el-card>
    </div>
    <div class="formList">
      <el-card shadow="never" class="text-container">
        <h3>其他表单</h3>
        <!-- <p v-for="item in formList" @click="handleView(item)" class="text">{{ item.title }}</p> -->
        <p v-for="item in formList" @click="handleView(item)" class="text">{{ item.title }}</p>
      </el-card>
    </div>
    <el-dialog
      @close="handleClosePlayerDialog"
      center
      v-model="dialogStatus.isPlayerVisible"
      :title="dialogStatus.title"
      draggable>
      <div :id="'player-' + curVideoId" style="width: 100%; height: 70vh; margin: auto"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { submit as submitApi } from "../../api/view";
import { getVideoList as getVideoListApi, getPlayAuth as getPlayAuthApi } from "../../api/video";

import { getFormList as getFormListApi } from "../../api/home";

import to from "await-to-js";
const formData = reactive({});
const optionData = reactive({});
const vFormRef = ref(null);

const router = useRoute();
// 表单JSON
const formJson = reactive(JSON.parse(router.query.formJson));
// 表单详情
const formDetail = reactive(JSON.parse(router.query.formDetail));
const userInput = reactive({
  scaleId: "",
  resultData: [],
  userId: "1",
});
console.log(formDetail);
const statusSubmit = ref(0); // 使用 ref 定义 statusSubmit
let globalExplain = {};
let tagExplains = [];
const submitForm = () => {
  vFormRef.value
    .getFormData()
    .then(async (formData) => {
      // Form Validation OK
      console.log(formData);
      let index = 1;
      for (let item in formData) {
        userInput.resultData.push({ sort: index, score: formData[item] });
        index++;
      }
      userInput.scaleId = formDetail.id;
      // userInput.resultData = formData
      const [err, res] = await to(submitApi(userInput));
      if (!err) {
        console.log(res);
        console.log("there");
        statusSubmit.value = 1; // 修改 statusSubmit 的值
        console.log(statusSubmit);
        // 直接重新赋值给普通变量
        globalExplain = res.data.globalExplain;
        tagExplains = res.data.tagExplains;
        console.log(globalExplain);
        console.log(tagExplains);
      }
    })
    .catch((error) => {
      // Form Validation failed
      ElMessage.error(error);
    });
};
const getFormListParams = reactive({
  pageSize: 10,
  pageNumber: 1,
});

const formList = ref([]);
const getFromList = async () => {
  const [err, res] = await to(getFormListApi(getFormListParams));
  if (!err) {
    console.log(res);
    formList.value = res.rows;
  }
};

const getVideoListParams = reactive({
  pageSize: 10,
  pageNum: 1,
});
const videoList = ref([]);
const getVideoList = async () => {
  const [err, res] = await to(getVideoListApi(getVideoListParams));
  if (!err) {
    console.log(res);
    videoList.value = res.rows;
  }
};
const dialogStatus = reactive({
  isPlayerVisible: false,
  title: "",
});
const curVideoId = ref("");
const videoPlayer = ref(null);
const handleCheck = async () => {
  await getVideoList();
  const curNum = Math.floor(Math.random() * 10);
  console.log(curNum);
  const row = videoList.value[curNum];
  dialogStatus.isPlayerVisible = true;
  dialogStatus.title = row.title;
  curVideoId.value = row.videoId;
  // 获取播放凭证
  const [err, res] = await to(getPlayAuthApi(row.videoId));
  if (!err) {
    console.log(res);
    videoPlayer.value = new Aliplayer({
      id: "player-" + row.videoId,
      width: "100%",
      vid: res.data.vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
      playauth: res.data.playAuth, //必选参数。音视频播放凭证。
      autoplay: true,
      preload: true,
    });
  } else {
  }
};

const handleClosePlayerDialog = () => {
  if (videoPlayer.value) {
    videoPlayer.value.dispose();
  }
};
onMounted(() => {
  getFromList();
  getVideoList();
});
</script>

<style scoped>
.container {
  background-image: url(../../assets/formViewBg.png);
  background-size: cover; /* 确保背景图片填充整个容器 */
  background-position: center; /* 将背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  width: 100vw; /* 设置宽度为视口宽度 */
  height: 100vh; /* 设置高度为视口高度 */
}

.formContent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.cards {
  width: 480px;
}

.formList {
  min-width: 350px;
  height: 600px;
  position: absolute;
  right: 20px; /* 调整到合适的位置 */
  top: 50%; /* 或其他合适的位置 */
  transform: translateY(-50%);
}

.text-container {
  height: 100%;
  overflow-y: auto;
}

.tags {
  margin-top: 20px;
  display: flex;
}

.tag {
  width: 30%;
  margin-right: 10px;
}

.text {
  cursor: pointer; /* 鼠标样式，使文本看起来像链接 */
}

.text:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线效果 */
}
</style>
